<template>
<view class="flex">
    <view class="ct_img">
        <image  class="ct_img" :src="customer.image" />
    </view>
    <view class="ct_content flex flex-column">
        <view class="fl1" >客户名称<br />{{ customer.customerName }}</view>
        <view class="fl1" >客户编码<br />{{ customer.customerCode }}</view>
        <view class="fl1" >客户地址<br />{{ address }}</view>
    </view>
    <button class="ct_btn" type="primary" size="mini" @tap="editCustomer">编辑</button>
    <button class="ct_btn" style="top:130rpx" type="primary" size="mini"  @tap.stop="goMap">导航</button>
</view>
</template>

<script >


export default{
    name: "customerHead",
    props:{
        customer:{
            type:Object,
            default:()=>{}
        }
    },
    data(){
      return{
          address:''
      }
    },
    watch:{
      'customer.location'(n){
          this.getLocation()
      }
    },
    methods:{
        getLocation(){
            const _this = this
            const location = this.customer.location.split(',').reverse()
            wx.request({
                url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${location}&key=QQXBZ-BUKYS-YEMOS-6DLDL-WMCTO-5ZFNX`,
                success(val) {
                    _this.address=val.data.result.address
                }
            })
        },
        editCustomer(){
            uni.navigateTo({url:`/pages/saleplace/index?updateId=${this.customer.customerId}`})
        },
        goMap(){
            // #ifndef MP-WEIXIN
            return uni.showToast({
                icon:'none',
                mask:true,
                title: '请在微信内运行',
            });
            // #endif
            if (!this.customer.location){
                uni.showModal({
                    title: '提示',
                    content: "未找到该客户坐标,请确认",
                })
                return
            }
            let [longitude,latitude] = this.customer.location.split(",")
            // 获取定位信息
            const _this = this
            uni.getLocation({
                type: 'wgs84', //返回可以用于uni.openLocation的经纬度
                // 用户允许获取定位
                isHighAccuracy:true,
                success: function(res) {
                    if (res.errMsg == "getLocation:ok") {
                        uni.openLocation({
                            latitude: Number(latitude),
                            longitude: Number(longitude),
                            address: _this.customer.customerName,
                            // 缩放大小
                            scale: 18,
                            success: function() {
                                console.log('成功的回调success');
                            }
                        });
                    }
                },
                // 用户拒绝获取定位后 再次点击触发
                fail: function(res) {
                    console.log(res)
                    if (res.errMsg == "getLocation:fail auth deny") {
                        uni.showModal({
                            content: '检测到您没打开获取信息功能权限，是否去设置打开？',
                            confirmText: "确认",
                            cancelText: '取消',
                            success: (res) => {
                                if (res.confirm) {
                                    uni.openSetting({
                                        success: (res) => {
                                            console.log('确定');
                                        }
                                    })
                                } else {
                                    console.log('取消');
                                    return false;
                                }
                            }
                        })
                    }
                }
            });
        }
    }
}
</script>



<style scoped lang="scss">
.ct_img{
  width: 250rpx;
  height: 250rpx;
}
.ct_content{
  width: 500rpx;
  height: 250rpx;
    font-size: 25rpx;
    padding: 15rpx;
}
.ct_btn{
  position: absolute;
  width: 100rpx;
  height: 50rpx;
    top: 40rpx;
  border-radius: 10rpx;
    padding: 0;
    right: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>